<template>
    <div class="hot">
      <!--1.轮播图-->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <!-- <div class="swiper-slide"><img src="../img/rowing/s1.png" alt="" width="100%"></div>
          <div class="swiper-slide"><img src="../img/rowing/s2.png" alt="" width="100%"></div>
          <div class="swiper-slide"><img src="../img/rowing/s3.png" alt="" width="100%"></div>
          <div class="swiper-slide"><img src="../img/rowing/s4.png" alt="" width="100%"></div>
          <div class="swiper-slide"><img src="../img/rowing/s5.png" alt="" width="100%"></div>
          <div class="swiper-slide"><img src="../img/rowing/s6.png" alt="" width="100%"></div>
          <div class="swiper-slide"><img src="../img/rowing/s7.png" alt="" width="100%"></div> -->
          <div class="swiper-slide" v-for="(casual,index) in homecasual" :key="index"><img :src="casual.imgurl" alt="" width="100%"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <!--2.中间导航-->
      <hot-nav></hot-nav>
      <!--3.广告位-->
      <div class="hot-ad">
        <img src="../img/hot_ad/home_ad.gif" alt="" width="100%">
      </div>
      <!--4.商品列表-->
      <hot-shop-list></hot-shop-list>
    </div>
</template>

<script>
    import Swiper from 'swiper'
    import 'swiper/swiper-bundle.css'

    import HotNav from './HotNav.vue'
    import HotShopList from './HotShopList.vue'
    // 导入vuex中的所有状态map
    import {
      mapState
    } from 'vuex'

    export default {
        name: 'Hot',
        computed:{
          ...mapState(['homecasual'])
        },
        mounted(){
          // 请求轮播图数据
          this.$store.dispatch('reqHomeCasual');
          // 请求首页导航数据,由于数据是通过vuex管理的，所有即使是在父组件中请求，也能在子组件中使用
          this.$store.dispatch('reqHomeNav');
          // 请求首页商品列表数据
          this.$store.dispatch('reqGoodsList');

          // 请求轮播图数据
          this.$store.dispatch('reqHomeCasual')
        },
        watch: {
          homecasual(){
            this.$nextTick(()=>{
              // 创建swiper(参考官方文档)
              new Swiper ('.swiper-container',{
                autoplay: true,// 自动轮播
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                }
              });
            })
          }
        },
        components: {
          HotNav,
          HotShopList
        },
        data(){
          return {
            imgArray:[
              {imgURL:require('../img/rowing/s1.png')},
              {imgURL:require('../img/rowing/s2.png')},
              {imgURL:require('../img/rowing/s3.png')},
              {imgURL:require('../img/rowing/s4.png')},
              {imgURL:require('../img/rowing/s5.png')},
              {imgURL:require('../img/rowing/s6.png')},
              {imgURL:require('../img/rowing/s7.png')},
              {imgURL:require('../img/rowing/s8.png')},
              {imgURL:require('../img/rowing/s9.png')}
            ]
          }
        }
    }
</script>

<!--使用stylus Css预编译器-->
<style scoped lang="stylus" ref="stylesheet/stylus">
  .hot
    width 100%
    height 100%
    padding-top 47px
    .hot-ad
      margin 8px 0
      background-color: #fff
      padding 5px
</style>
